<template>
	<view class="content">
		<view class="hello">
			<view class="title">
				<text v-html="readyState"></text>
			</view>
			<view class="ul">
				<view class="li">
					<view style="height: 200px;background-color: #000000;">

					</view>
					<text>122</text>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'

	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		data() {
			return {
				readyState: '未连接'
			}
		},
		onNavigationBarButtonTap() {
			console.log("点击了自定义按钮");
		},
		onLoad() {
			if (!this.hasLogin) {
				uni.showModal({
					title: '未连接',
					content: '您未连接服务器，需要连接后才能继续',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							/**
							 * 如果需要强制登录，使用reLaunch方式
							 */
							if (this.forcedLogin) {
								uni.reLaunch({
									url: '../login/login'
								});
							} else {
								uni.navigateTo({
									url: '../login/login'
								});
							}
						}
					}
				});
			}
		},
		mounted: function() {
			var that = this;
			setInterval(function() {
				that.readyState = localStorage.getItem("readyState")
			}, 2000);
		}
	}
</script>

<style>
	.hello {
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.title {
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul {
		font-size: 15px;
		color: #8f8f94;
		margin-top: 25px;
	}

	.ul>view {
		line-height: 25px;
	}
</style>
